0. "../.. Amplication Website Animation { Loop } .." ;
This is a website header for Amplication's website, a platform dedicated to code modification and creation.
Upon receiving the project, we envisioned a dynamic animation loop designed to resonate with the coding community's visual language while staying true to Amplication's brand identity.
As a result of the limited design guidelines and elements I had to work with, I had to think creatively and find ways to make the animation stand out.
I designed a layout that shows a piece of code's journey from the Amplication platform through various modifiers, ending with upload to the cloud. Afterwards, each icon was carefully refined.
__________/.../__________
1. { Early Stages Frame Design: }
2. Amplication brand / and / design elements:
3. "" Icon { Sketches }: ""
{________<< @ >>________}
I strategically manipulated the vector layers to ensure a seamless online animation experience, because this animation had to be in JSON format. This process required working only in vector-based layers, and within the LottieFiles supported features - which are very limited.
4. { Icon } animation <evolution>:
After that, it was just a bunch of trial and error, trying to manipulate the key frames to make those simple designs have a lot of character, and then making sure that they play in the loop.
The outcome is slick animation that, despite its straightforward graphic system, conceals cool little animated details.
{ "THA.NKS" <FOR/../SCROLLING> :} }
